<template>
    <div class="orderconfirmNow">
        <div class="address">
            <div class="title">
                <p>地址:</p>
                <p>
                    <!-- <van-icon @click="onEdit" name="edit" size="22"/> -->
                    <van-button @click="onEdit" class="batch_order" size="mini" type="primary">编辑地址</van-button>
                    <van-button v-if="userState==2" class="batch_order" size="mini" type="primary" @click="batchOrder">批量下单</van-button>
                </p>
            </div>
            <div class="cont" v-if="address.id">
                <div class="name">{{address.name}}</div>
                <div class="tel">{{address.mobile}}</div>
                <div class="ads">{{address.province+address.city+address.district+address.address}}</div>
            </div>
            <div class="cont" v-else>
                暂无收货地址
            </div>
        </div>
        <van-card :num="goods.num" :price="goods.price" :desc="goods.guageName" :title="goods.title" :thumb="goods.url"/>
        <van-field v-model="message" rows="2" autosize label="留言" type="textarea" maxlength="50" placeholder="请输入留言" show-word-limit/>
        <div class="price">
            <div class="item">
                <p>小计</p>
                <p>￥{{goods.price*goods.num}}</p>
            </div>
            <div class="item">
                <p>运费</p>
                <p>￥15</p>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" closeable>
            <div class="address_list">
                <van-button class="btn" type="primary" size="small" @click="onekey">导入地址</van-button>
                <div class="list_cont">
                    <van-checkbox-group v-model="curr_address" @change="currAddress">
                        <div class="item" v-for="item in address_list" :key="item.id">
                            <van-checkbox :name="item.id"></van-checkbox>
                            <div class="cont">
                                <div class="name">{{item.name}}</div>
                                <div class="tel">{{item.mobile}}</div>
                                <div class="ads">{{item.province+item.city+item.district+item.address}}</div>
                                <div class="num">
                                    <span>分配数量：</span><van-stepper v-model="item.sum" />
                                </div>
                            </div>
                        </div>
                    </van-checkbox-group>
                    <div class="submit">
                        <van-button color="red" type="primary" size="large" @click="submit">批量下单</van-button>
                    </div>
                </div>
            </div>
        </van-popup>
        <van-submit-bar :price="(goods.price*goods.num+15)*100" button-text="提交订单" @submit="onSubmit"></van-submit-bar>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            show:false,
            goods: this.$store.state.payGoods,
            address:{},//地址列表
            address_list:{},
            curr_address:[],
            message:null,//留言信息
        }
    },
    computed:{
        ...mapState(['openid', 'userState']),
        apiUrl() {
            return this.userState == 0 ? this.$api.merchantOrders: this.$api.platformPurchase
        },
        //计算价格
        paramPrice() {
            return this.userState == 0 ? { price: this.goods.price } : { m_price: this.goods.price }
        }
    },
    mounted(){
        console.log(this.goods)
        this.getAddress()
    },
    methods:{
        //点击批量下单
        async submit(){
            let sumNum = 0
            let num = []
            this.address_list.forEach(item=>{
                this.curr_address.forEach(i=>{
                    if (i == item.id) {
                        sumNum = sumNum+item.sum
                        num.push(item.sum)
                    }
                })
            })
            if (this.curr_address.length>0) {
                if (sumNum == this.goods.num) {
                    let form = {
                        subtotal:this.goods.num,
                        goods_id: this.goods.goods_id,
                        hao_id: this.goods.guageId,
                        price: this.goods.price,
                        num:num.join(','),
                        address_id:this.curr_address.join(','),
                        openid:this.openid
                    }
                    console.log(form)
                    let{data:{code,data}} = await this.$http.post(this.$api.addressOrder,form)
                    if (code === 0) {
                        this.$store.commit('payOrder', data.total[0])
                        console.log(data)
                        this.$router.push('/payment')
                    }

                }else if (sumNum < this.goods.num) {
                    this.$toast.fail(`请正确分配发货数量，目前剩余(${this.goods.num-sumNum})箱待分配`);
                }else{
                    this.$toast.fail(`请正确分配发货数量，目前超出(${sumNum-this.goods.num})箱`);
                }
                
            }
        },
        //地址列表改变
        currAddress(e){
            console.log(e)
            this.curr_address = e
        },
        //批量下单
        async batchOrder(){
            this.show = true
            this.getAddressList()
           
        },
        //导入地址
        async onekey(){
            let {data:{code,data}} = await this.$http.post(this.$api.onekey,{openid:this.openid})
            if (code == 0) {
                let {data:{code,data}} = await this.$http.get(this.$api.address,{openid:this.openid})
                if (code == 0) {
                    if (data.items.length>0) {
                        this.address_list = data.items.map(item=>{
                            item.sum = 0
                            return item
                        })
                    }
                }
            }
        },
        //获取列表
        async getAddressList(){
            let {data:{code,data}} = await this.$http.get(this.$api.address,{openid:this.openid})
            if (code == 0) {
                if (data.items.length>0) {
                    this.address_list = data.items.map(item=>{
                        item.sum = 0
                        return item
                    })
                     console.log(this.address_list)
                }else{
                    this.onekey()
                }
                
            }
        },
        //编辑地址
        onEdit() {
            this.$router.push('/address')
        },
        //获取地址列表
        async getAddress(){
            let form = {
                size:1000,
                current:1,
                openid:this.openid
            }
            let {data:{code,data}} = await this.$http.post(this.$api.addressList,form)
            if (code === 0) {
                data.items.forEach(item=>{
                    if (item.is_default == 0) {
                        this.address={
                            id:item.id,
                            name:item.name,
                            mobile:item.mobile,
                            province:item.province,
                            city:item.city,
                            district:item.district,
                            address:item.address
                        }
                    }
                })
                if (!this.address.name) {
                    this.address={
                        id:data.items[0].id,
                        name:data.items[0].name,
                        mobile:data.items[0].mobile,
                        province:data.items[0].province,
                        city:data.items[0].city,
                        district:data.items[0].district,
                        address:data.items[0].address
                    }
                }
            }
        },
        //提交订单
        async onSubmit(){
            console.log(this.goods,this.address)
            let form = {
                goods_id: this.goods.goods_id,
                hao_id: this.goods.guageId,
                order_num: this.goods.num,
                ...this.paramPrice,
                address_id: this.address.id,
                remark: this.message,
                openid: this.openid
            }
            let { data: { code, data } } = await this.$http.post(this.apiUrl,form)
            if (code === 0) {
                this.$store.commit('payOrder', data.total[0])
                console.log(data)
                this.$router.push('/payment')
            }
        },
        //修改地址
        onClickEditAddress(){
            
        }
    }
}
</script>
<style lang="scss" scoped>
    .orderconfirmNow{
        .address{
            background-color: #fff;
            .title{
                padding: 1rem;
                font-size: 16px;
                border-bottom: 1px solid #f0f0f0;
                display: flex;
                justify-content: space-between;
            }
            .cont{
                padding: 1rem;
            }
        }
        .price{
            background-color: #fff;
            padding:0 1rem;
            margin-top: 1rem;
            .item{
                padding: 1px;
                display: flex;
                justify-content: space-between;
                line-height: 5rem;
                border-bottom: 1px solid #f0f0f0;
            }
            .item:last-child{
                border-bottom: 0;
            }
        }
        .batch_order{
            margin-left: 0.5rem;
        }
        .address_list{
            max-height: 100vh;
            overflow: hidden;
            .btn{
                margin: 1rem;
            }
            .list_cont{
                height: calc(100vh - 50px);
                overflow-y: auto;
                background-color: #f1f1f1;
                .item{
                    display: flex;
                    padding: 1rem;
                    background-color: #fff;
                    margin-top: 0.5rem;
                    .cont{
                        margin-left: 1rem;
                        width: 90%;
                    }
                    .num{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin:1rem 0;
                    }
                }
                .item:last-child{
                    margin-bottom: 50px;
                }
                .submit{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                }
            }
            
        }
    }
</style>